<template>
  <div class="container">
    <p class="title">文章管理</p>
    <!-- 导航栏 -->
    <template>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="文章管理" name="/manage/article/text"></el-tab-pane>
        <el-tab-pane label="类目管理" name="/manage/article/category"></el-tab-pane>
        <el-tab-pane label="发布文章" name="/manage/article/edit"></el-tab-pane>
        <router-view></router-view>
      </el-tabs>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: this.$route.path
    };
  },
  methods: {
    handleClick() {
      this.$router.replace({ path: this.activeName });
    }
  },
  watch: {
    "$route.path": function(newVal, oldVal) {
      this.activeName = newVal;
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  .title {
    font-size: 30px;
    margin: 10px auto;
  }
}
</style>